<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    width="750px"
    :maskClosable="false">
    <div style="margin-top: 12px;">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="类别名称" prop="categoryName" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input v-model.trim="addForm.categoryName" placeholder="请输入类别名称" :max-length="40"></a-input>
        </a-form-model-item>
        <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sortOrder">
          <a-radio-group @change="radioChange" v-model="addForm.sortOrder">
            <a-radio :value="1">升序</a-radio>
            <a-radio :value="2">降序</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="收支类型" prop="inOrOut" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-select placeholder="请选择收支类型" @select="onSelect" v-model="addForm.inOrOut">
            <a-select-option :value="item.id" v-for="(item, index) in TypeList" :key="index">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="描述信息" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-textarea :rows="4" v-model.trim="addForm.description" placeholder="请输入描述信息" :max-length="255" />
        </a-form-model-item>

      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import { addProjectCate, editProjectCate } from '@/api/budget'

export default {
    components: {},
    data () {
        const checkType = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择收支类型'))
            } else {
                callback()
            }
        }
        return {
            addRules: {
                categoryName: [
                    { required: true, message: '请输入类别名称!', trigger: 'blur' }
                ],
                inOrOut: [
                    { required: true, validator: checkType, message: '请选择收支类型!', trigger: 'change' }
                ],
                sortOrder: [
                    { required: true, message: '请选择排序方式!', trigger: 'change' }
                ]
            },
            addForm: {
                categoryName: '',
                parentCategoryId: null,
                description: '',
                // 1 升序  2降序
                sortOrder: 1,
                // 该类别下的预算项目主要收支类型，1：收入，2：支出，3：其它
                inOrOut: 1

            },
            TypeList: [{ id: 1, name: '收入' }, { id: 2, name: '支出' }, { id: 3, name: '其它' }],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: null
        }
    },

    methods: {
        // 收支类型
        onSelect (e) {
            console.log(e)
            this.addForm.inOrOut = e
        },
        // 排序
        radioChange (e) {
            const { value } = e.target
            this.addForm.sortOrder = value
        },
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            return this
        },
        setData (row) {
            // this.rowData = row

            // 顶级 1
            if (row != 1) {
                if (this.mode == 'add') {
                    this.addForm.parentCategoryId = row.categoryId
                } else {
                    this.addForm = row
                    this.addForm.parentCategoryId = row.categoryId
                }
            } else {
                this.addForm.parentCategoryId = null
            }
            // console.log(row)
        },

        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('success')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    console.log(this.addForm)
                    const Api = this.mode == 'add' ? addProjectCate : editProjectCate
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false

                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
